<template>
  <div class="search-container">
    <van-nav-bar title="搜 索" class="navBar" />
    <van-cell-group class="search">
      <van-field placeholder="请输入商家或美食名称" v-model="keyword" />
      <van-button type="info" @click="search">搜 索</van-button>
    </van-cell-group>
    <!-- 搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-if="resultList.length"
    >
      <van-cell v-for="item in resultList" :key="item" :title="item" />
    </van-list>
    <!-- 搜索关键字 -->
    <van-cell-group class="history" v-else-if="searchList.length">
      <van-cell title="单元格" v-for="(item,index) in searchList" :key="index"> </van-cell>
    </van-cell-group>
    <!-- 搜索历史 -->
    <div  class="history" v-else>
    <p class="hint">搜索历史</p>
    <van-cell-group>
      <van-cell title="单元格" v-for="(item,index) in historyList" :key="index">
        <van-icon name="cross" slot="right-icon" />
      </van-cell>
    </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      resultList: [],
      loading: false,
      finished: false,
      searchList:[],
      historyList:[]
    }
  },
  methods: {
    search() {},
    onLoad() {}
  }
}
</script>

<style lang="less" scoped>
.search-container {
  /deep/.navBar {
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-arrow-left {
      font-size: 20px;
      color: #fff;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .van-field {
      width: 276px;
      border: 1px solid #ccc;
      background-color: #f5f5f5;
    }
    .van-button--info {
      width: 70px;
      font-size: 16px;
    }
  }
  .hint {
    padding: 0 15px;
  }
  .history {
    .van-cell {
      align-items: center;
      .van-icon-cross {
        font-size: 16px;
      }
    }
  }
}
</style>
